<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			.content {
				padding-top: 100px;
			}

			.content .select {
				width: 300px;
				height: 40px;
				background: #FFFFFF;
				margin: 0px auto;
				position: relative;
				cursor: pointer;
				border: 1px solid #999;
				border-radius: 5px;
			}

			.content .select::after {
				content: "";
				display: block;
				width: 10px;
				height: 10px;
				border-left: 1px solid #D0D0D0;
				border-bottom: 1px solid #D0D0D0;
				top: 12px;
				right: 12px;
				position: absolute;
				transform: rotate(-46deg);
				transition: all .3s ease-in;
			}

			.content .select p {
				width: 300px;
				line-height: 40px;
				font-size: 16px;
				font-family: "microsoft yahei";
				color: #666666;
				padding: 0px 15px;
			}

			.content .select ul {
				width: 300px;
				display: none;
				font-size: 16px;
				background: #FFFFFF;
				position: absolute;
				top: 42px;
				left: 0px;
				max-height: 0px;
				overflow: hidden;
				transition: max-height .3s ease-in;
				border-radius: 5px;
				/* border-top: 1px solid #fff; */
				border-right: 1px solid #999;
				border-left: 1px solid #999;
				border-bottom: 1px solid #999;
				z-index: 10;
				max-height: 280px;
				overflow-y: auto;
			}

			.content .select ul li {
				width: 100%;
				height: 34px;
				line-height: 34px;
				padding: 0px 15px;
				list-style: none;
				color: #666666;
			}

			.content .select ul li.Selected {
				background: #deb316;
				color: #FFFFFF;
			}

			.content .select ul li:hover {
				background: #D0D0D0;
			}

			@-webkit-keyframes slide-down {
				0% {
					transform: scale(1, 0);
				}

				25% {
					transform: scale(1, 1.2);
				}

				50% {
					transform: scale(1, 0.85);
				}

				75% {
					transform: scale(1, 1.05);
				}

				100% {
					transform: scale(1, 1);
				}
			}

			.content .select.open ul {
				max-height: 250px;
				transform-origin: 50% 0;
				-webkit-animation: slide-down .5s ease-in;
				transition: max-height .2s ease-in;
			}

			.content .select.open::after {
				transform: rotate(134deg);
				transition: all .3s ease-in;
				top: 18px;

			}
		</style>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script>
			$(function() {
				// var html = '';
				var data = ['第二选项', '第二选项1', '第二选项2', '第二选项3'];
				setFunc('city', data, function(res){
					console.log('city:下标是 ',res)
				})
				var data2 = ['所以选项', 'Html5', 'JavaScript', 'Jquery', 'Java', 'Python', "Node", "C#"];
				setFunc('province', data2,function(res){
					console.log('province:下标是 ',res)
				})
			});
		
			function setFunc(name, data, reject) {
				var html = '';
				for (var i = 0; i < data.length; i++) {
					if (i == 0) {
						html += `<li data-value="` + data[i] + `" data-id="`+i+`" class="Selected">` + data[i] + `</li>`
					} else {
						html += `<li data-value="` + data[i] + `" data-id="`+i+`">` + data[i] + `</li>`
					}
				}
				$("#" + name + " > p").text(data[0]);
				$("#" + name + " > p").attr('data-value', 0);
				$("#" + name + " ul").html(html);
				$("#" + name + " > p").click(function(e) {
					$("#" + name + " ul").show();
					$("#" + name).toggleClass('open');
					e.stopPropagation();
				});
				$("#" + name + " ul li").click(function(e) {
					var _this = $(this);
					$("#" + name + " > p").text(_this.attr('data-value'));
					$("#" + name + " > p").attr('data-value', _this.attr('data-value'));
					$("#" + name + " > p").attr('data-id', _this.attr('data-id'));
					reject(_this.attr('data-id'));
					_this.addClass("Selected").siblings().removeClass("Selected");
					$("#" + name).removeClass("open");
					$(".select ul").hide();
					e.stopPropagation();
				});
				$(document).on('click', function() {
					$("#" + name).removeClass("open");
					$(".select ul").hide();
				})
			}
		</script>
	</head>
	<body>
		<div class="content">
			<div class="select" id="province">
				<p data-value="" data-id=""></p>
				<ul>
					<!-- <li data-value="所以选项" class="Selected">所以选项</li>
					<li data-value="Html">Html</li>
					<li data-value="Html5">Html5</li>
					<li data-value="JavaScript">JavaScript</li>
					<li data-value="Jquery">Jquery</li>
					<li data-value="Java">Java</li> -->
				</ul>
			</div>
			<div class="select" id="city" style="margin-top: 30px;">
				<p data-value="" data-id=""></p>
				<ul>
					<!-- <li data-value="第二选项" class="Selected">第二选项</li>
					<li data-value="第二选项1">第二选项1</li>
					<li data-value="第二选项2">第二选项2</li>
					<li data-value="第二选项3">第二选项3</li> -->
				</ul>
			</div>
		</div>
	</body>
</html>
